<template>
  <div id="text">
<h2>  {{detailData.title}}</h2>
<span> 标签： {{detailData.tip}}</span>
<div class="pp">
      {{detailData.content}}
</div>

  <h5> 作者： {{detailData.author}}</h5>
<div class="del">
  <el-button type="danger" icon="el-icon-delete" @click="deleteArt(detailData.author,detailData.id)">删除</el-button>
</div>
<div class="upd">
  <el-button  type="warning" icon="el-icon-refresh"  @click="updateArt(detailData.author,detailData)">修改</el-button>
</div>

    </div>
</template>

<script>
import axios from 'axios';
export default {
name:'look',
data(){
    return {
        title:'',
        detailData:{}
    }
},
mounted(){
    
    this.title = this.$route.params.title;
    // console.log(this.title);
  
    this.$store.state.artData.forEach(element => {
      if(element.title == this.title){
        this.detailData = element
    // console.log(element);

      }
    });
},
methods:{
  showPoke(){
    if(this.artData!=='') return;
      axios.get("/show").then(res=>{
        // console.log(res);
       this.$store.commit('putArtdata',res.data.data)
      this.artData =  this.$store.state.artData
      
     }).catch(err=>{
      console.log(err);
     })
  },
  deleteArt(name,id){
    // console.log(id);
      const uid = id;
      if(this.$store.state.user.username !== name)
      {
        this.$message('您无权删除！');
        return;
      }else{
        axios.post('/deletePoke',{
          id:uid
        }).then(res=>{
          console.log(res);
          
          
         
        }).catch(error=>{
          console.log(error);
        })
      }
      // this.showPoke();
      this.$router.replace({
        path:'/block',
        name:'block'
      })
    }, 
    
    
    
    updateArt(name,data){
    // console.log(id);
     
      if(this.$store.state.user.username !== name)
      {
        this.$message('您无权修改！');
        return;
      }else{
        this.$router.replace({
          path:'/update',
          name:'update',
          params:{
            data
          }
        })
      }
    },
}

}
</script>

<style lang="less" scoped>

#text{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  // border: 1px solid grey;
  h2{
    color: #409EFF;
  }
  .pp{
    width: 500px;
    height: 600px;
    background-color: #f2eada;
    text-align: center;
  }
  .del{
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .upd{
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>